<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title>QMSCY-Timer</title>
    <link href="css/fliptimer.css" rel="stylesheet" type="text/css" />
    <style>
        body {
            background-color: #2020209e;
        }

        .clock-content {
            width: 100%;
            text-align: center;
            text-align: -webkit-center;
            margin-top: 6%;
        }

        .img-content {
            margin-top: 45px;
            display: none;
        }

        .m-top-10 {
            margin-top: 10px;
        }

        .m-top-50 {
            margin-top: 50px;
            display: block;
        }

        label {
            font-size: 13px;
            color: #bbbbbb;
            font-family:'Courier New', Courier, monospace;
        }

        img {
            background-color: #FFFFFF;
            border-radius: 3px;
        }
    </style>
</head>

<body>
    <div class="clock-content">
        <label class="m-top-50">17:00</label>
        <div class="dowebok-1700 m-top-10">
            <div class="hours"></div>
            <div class="minutes"></div>
            <div class="seconds"></div>
        </div>
        <label class="m-top-50">17:30</label>
        <div class="dowebok-1730 m-top-10">
            <div class="hours"></div>
            <div class="minutes"></div>
            <div class="seconds"></div>
        </div>
        <label class="m-top-50">18:50</label>
        <div class="dowebok-1850 m-top-10">
            <div class="hours"></div>
            <div class="minutes"></div>
            <div class="seconds"></div>
        </div>
        <div class="img-content">
            <img src="img/ready.gif">
        </div>
    </div>

    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/jquery.fliptimer.js"></script>
    <script>
        $(function () {
            var d = new Date();
            var dateStr = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate();
            var startTime = new Date(dateStr + ' 08:30:00');
            var endtime = new Date(dateStr + ' 18:50:00');

            var sShowImg = new Date(dateStr + ' 16:50:00');
            var eShowImg = new Date(dateStr + ' 19:00:00');

            if (d > startTime && d < endtime) {
                // 倒计时
                var timeStr = dateStr + ' 17:00:00';
                initTimer('.dowebok-1700', timeStr, function () {
                    $('.img-content img').attr('src', 'img/go.gif');
                });

                timeStr = dateStr + ' 17:30:00';
                initTimer('.dowebok-1730', timeStr, function () {
                    $('.img-content img').attr('src', 'img/go.gif');
                });

                timeStr = dateStr + ' 18:50:00';
                initTimer('.dowebok-1850', timeStr, function () {
                    $('.img-content img').attr('src', 'img/go.gif');
                });
            } else {
                // 时钟
                initClock('.dowebok-1700');
                initClock('.dowebok-1730');
                initClock('.dowebok-1850');
            }

            setInterval(function () {
                d = new Date();
                if (d > sShowImg && d < endtime) {
                    $('.img-content').show();
                    $('.img-content img').attr('src', 'img/ready.gif');
                } else if (d > endtime && d < eShowImg) {
                    $('.img-content').show();
                    $('.img-content img').attr('src', 'img/go.gif');
                } else {
                    $('.img-content').hide();
                }
            }, 1000);

        });

        // 时钟
        function initClock(e) {
            $(e).flipTimer({
                seconds: true
            });
        }

        // 计时器
        function initTimer(el, time, callback) {
            $(el).flipTimer({
                direction: 'down',
                date: time,
                callback: callback
            });
        }
    </script>

</body>

</html>